<template>
  <div>
    <div class="tost-box">
      <!-- <img src="../../../../static/image/tanhao.png"> -->
      <span>您有{{eunumber}}个保单终止，请知悉</span>
      <!-- 您有3个保单终止，请知悉 -->
      <!-- EUNumber;//超时任务个数 ?? -->
    </div>
    <Table :columns="columns" :data="pcWorkIndexTerminateListVO.records" :loading="isLoading" style="margin-top:10px">
      <template slot-scope="{ row }" slot="payYears">
        <span>{{row.payYear + "/" + row.payYears + row.payintv}}</span>
      </template>
      <template slot-scope="{ row }" slot="terminateDate">
        <span>{{row.terminateDate ? row.terminateDate.slice(0,10): ''}}</span>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="forward(row)">查看详情</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>
  </div>
</template>

<script>
import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../../util/mixins/tableChangeMixin";
export default {
  name: "end",
  mixins: [loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "getPCWorkIndex",
      },
      eunumber: 0,
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80,
        },
        {
          title: "保单号",
          key: "contNo",
          align: "center",
          width: "180",
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: "130",
        },
        {
          title: "应交日",
          key: "payToDay",
          align: "center",
          width: "130",
        },
        {
          title: "应交次数",
          slot: "payYears",
          align: "center",
          width: "110",
        },
        {
          title: "应收保费",
          key: "premium",
          align: "center",
          width: "140",
        },
        {
          title: "终止日",
          slot: "terminateDate",
          align: "center",
          minWidth: 180,
        },
        {
          title: "保单状态",
          key: "contStateName",
          align: "center",
          width: "110",
        },
        {
          title: "保单标志",
          key: "contFlagName",
          align: "center",
          width: "130",
        },
        {
          title: "业务员",
          key: "agentName",
          align: "center",
          width: "170",
        },
        {
          title: "操作",
          key: "operate",
          slot: "operate",
          align: "center",
          width: "130",
          fixed: "right",
        },
      ],
      pcWorkIndexTerminateListVO: { records: [] },
    };
  },
  created() {
    this.form.agentSelectType = 3;
  },
  methods: {
    rowClassName(row, index) {
      if (row.disposestate == 'F') return "table-bgc";
    },
    // 工作状态跳转
    forward(row) {
      row.contno = row.contNo || row.contno;
      row.planid = row.planId || row.planid;
      row.workid = row.workId || row.workid;
      row.agentcode = row.agentCode || row.agentcode;
      row.paytodate = row.payToDay || row.paytodate;
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "end",
          },
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: JSON.stringify(row),
            insuranceType: "end",
          },
        });
      }
    },
    tableThen(res) {
      this.eunumber = res.data.eunumber;
      this.pcWorkIndexTerminateListVO = res.data.pcWorkIndexTerminateListVO;
    },
    updateIpagination(res) {
      let data = res.data.pcWorkIndexTerminateListVO;
      this.ipagination.total =
        +data.total || (data.total == 0 ? 0 : this.ipagination.total);
      this.ipagination.index = +data.current || this.ipagination.index;
      this.ipagination.pageSize = +data.size || this.ipagination.pageSize;
    },
  },
};
</script>
<style scoped>
.tost-box {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff7ea;
  border-radius: 4px;
  color: #ee8623;
  font-size: 14px;
  margin-bottom: 10px;
}
.tost-box > img {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
</style>
